<template>
	<!-- 单选一级组件
		使用方法：
		（1）页面引入该组件、并注册
		（2）
		<singleSelect :pickerSingleJson="idTypeArr">
			证件类型
		</singleSelect>
		（3）idTypeArr 数据内容
		
	 -->
	<view class="single-box">
		<view class="mpvue-picker">
			<view class="row line-h">
				<view class="left">
					<slot>he对对对llo</slot>
				</view>
				<slot name="inp">
					<input type="text" v-model="pickerText" v-if="flag" disabled="true" class="left input-txt" @click="showSinglePicker">
					<input type="text" v-model="message" v-if="!flag" disabled="true" ref="value" class="left input-txt" @click="showSinglePicker">
				</slot>
					<label class="iconfont right" @click="showSinglePicker">&#xe640;</label>
			</view>
			<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
			 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
	</view>
</template>

<script>
	// https://github.com/zhetengbiji/mpvue-picker
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	// https://github.com/zhetengbiji/mpvue-citypicker
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	// import idcardData from '../../../common/idcard.data.js';

	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		props:['pickerSingleJson','message'],
		data() {
			return {
				holder:"wode msg",
				title : "",
				pickerSingleArray: this.pickerSingleJson,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				idcardvalue:'',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				flag:false
			};
		},
		onLoad(){
// 			console.log(this.message);
// 			this.pickerText = this.message ;
		},
		methods: {
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				this.pickerText = e.label;
				this.idcardvalue = e.value;
				
				// 暴露传给父组件的   证件value值,选中的证件值
				this.$emit("listenToshimingrenzheng",[this.idcardvalue,this.pickerText]);
				
			},
			// 单列
			showSinglePicker() {
				this.flag = !this.flag;
				this.pickerValueArray = this.pickerSingleArray
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker.show()
			}
		},
		onBackPress() {
		  if (this.$refs.mpvuePicker.showPicker) {
			this.$refs.mpvuePicker.pickerCancel();
			return true;
		  }
		  if (this.$refs.mpvueCityPicker.showPicker) {
			this.$refs.mpvueCityPicker.pickerCancel();
			return true;
		  }
		},
		onUnload() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel()
			}
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		}
	};
</script>

<style scoped="scoped">
	.row {
		height: 98upx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.row input {
		flex: 3;
	}
	
	.left {
		font-size: 15px;
		margin-right: 20px;
		flex: 1;
	}
	.input-txt{
		margin-left: 5px;
	}
</style>